<template>
	<view class="content">
		<view>
			<uni-icons type="calendar" color="#fff" size="15"></uni-icons> 第{{getWeekNumber()}}周
			{{month}}月{{date}}日
			{{weekDays[new Date(year+"/"+month+"/"+date).getDay()]}}
		</view>
		<picker-view indicator-class="selectLabel" :value="[1]" @change="change" class="picker-view" mask-style="background:none;">
			<picker-view-column>
				<view class="item" v-for="(item,index) in edus" :key="index" @click="goDetail()">{{item.time}}
					{{item.label}}
				</view>
			</picker-view-column>
		</picker-view>
		<view>
			<uni-icons @click="forward" type="left" color="#fff"
				style="position: absolute;left: 10px;z-index: 29;top:50%;"></uni-icons>
			<uni-icons type="right" color="#fff" @click="next"
				style="position: absolute;right: 10px;z-index: 29;top: 50%;"></uni-icons>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				edus: [{
					value: 1,
					time: "06:00",
					label: '起床'
				}, {
					value: 2,
					time: "07:00",
					label: '上课'
				}, {
					value: 3,
					time: "08:00",
					label: '英语课第3课'
				}, {
					value: 4,
					time: "09:00",
					label: '家庭聚会'
				}, {
					value: 5,
					time: "10:00",
					label: '运动'
				}, {
					value: 6,
					time: "13:00",
					label: '睡觉'
				}],
				current: 1,
				weekDays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				index: 0,
				year: null,
				month: null,
				date: null
			};
		},
		onShow() {
			this.year = new Date().getFullYear()
			this.month = new Date().getMonth() + 1,
				this.date = new Date().getDate()
		},
		methods: {
			change(e) {
				this.current = e.detail.value[0]
			},
			getWeekNumber() {
				const date = new Date(this.year + "/" + this.month + "/" + this.date);
				const startOfYear = new Date(date.getFullYear(), 0, 1);
				const pastDaysOfYear = (date - startOfYear) / 86400000;
				const weekNumber = Math.ceil((pastDaysOfYear + startOfYear.getDay() + 1) / 7);
				return weekNumber;
			},
			forward() {
				const currentDate = new Date(this.year + "/" + this.month + "/" + this.date);
				currentDate.setDate(currentDate.getDate() - 1)
				this.year = currentDate.getFullYear()
				this.month = currentDate.getMonth() + 1
				this.date = currentDate.getDate()
			},
			next() {
				const currentDate = new Date(this.year + "/" + this.month + "/" + this.date);
				currentDate.setDate(currentDate.getDate() + 1)
				this.year = currentDate.getFullYear()
				this.month = currentDate.getMonth() + 1
				this.date = currentDate.getDate()
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/plan/detail'
				});
			}
		}
	}
</script>
<style>
	.uni-picker-view-mask {
		background: none;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 50rpx 0;
		text-align: center;
	}

	.picker-view {
		width: 90%;
		height: 240px;
		margin: 0 auto;

	}

	.picker-view .item {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	// .uni-picker-view-mask {
	// 	background: linear-gradient(180deg, hsl(0deg 0% 6.45% / 10%), hsl(0deg 0% 0% / 40%)), linear-gradient(0deg, hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 40%))
	// }

	// .uni-picker-view-mask {
	// 	background: linear-gradient(180deg,hsla(0,0%,100%,.85),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
	// 	/* background-image:linear-gradient(180deg, hsla(0,0%,0%,.47), hsla(0,0%,0%,.31)), linear-gradient(0deg, hsla(0,0%,0%,.72), hsla(0,0%,0%,.36)) !important */
	// }

	.mask {
	}
</style>